<template>
  <div class="city">
    <div class="city__top">
      <div class="title">当前城市 - 深圳</div>
    </div>
    <!-- 搜索区域 -->
    <div class="city__search">
      <div class="input-box">
        <input type="text" v-model="searchValue" />
      </div>
      <div class="cancel-btn">取消</div>
    </div>

    <!-- 主体部分 1 -->
    <div class="city__body" v-show="!searchValue">
      <div class="content" ref="content">
        <div class="recommend-city"></div>

        <div
          class="section"
          v-for="item in displayCities"
          :key="item.py"
          :ref="item.py"
        >
          <div class="section-index">{{ item.py }}</div>
          <div class="section-box">
            <div class="city-item" v-for="city in item.list" :key="city.cityId">
              {{ city.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="nav">
        <ul>
          <li
            class="nav-item"
            v-for="item in displayIndexs"
            :key="item"
            @click="onClick(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 主体部分 2 展示搜索结果 -->
    <div class="city__body" v-show="searchValue">
      <!-- 搜索有结果 -->
      <div class="search__result" v-if="searchResult.length">
        <ul>
          <li v-for="item in searchResult" :key="item.cityId">
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 搜索没有结果 -->
      <div class="search__empty" v-else>
        <h1>没有内容</h1>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "city",

  data() {
    return {
      cities: [],

      searchValue: "",
    };
  },

  computed: {
    // 展示到页面上使用的
    displayCities() {
      // 后端接口数据如下格式
      // [
      //   { cityId: 100, name: "鞍山", pinyin: "anshan" },
      //   { cityId: 101, name: "安庆", pinyin: "anqing" },
      //   { cityId: 100, name: "北京", pinyin: "beijin" },
      //   { cityId: 101, name: "天津", pinyin: "tianjin" },
      // ];
      // // 前端展示需要的数据格式
      // [
      //   {
      //     py: "A",
      //     list: [
      //       { cityId: 100, name: "鞍山", pinyin: "anshan" },
      //       { cityId: 101, name: "安庆", pinyin: "anqing" },
      //     ],
      //   },
      //   {
      //     py: "B",
      //     list: [{ cityId: 100, name: "北京", pinyin: "beijin" }],
      //   },
      //   {
      //     py: "T",
      //     list: [{ cityId: 101, name: "天津", pinyin: "tianjin" }],
      //   },
      // ];
      const result = []; // 最终返回的数据
      this.cities.forEach((city) => {
        const pinyin = city.pinyin;
        const py = pinyin.charAt(0).toUpperCase(); // 大写的首字母 B A C

        // 判断当前循环的 py 是否已经在 result 中存在，如果存在，则追加到对应的 list 中。否则新增
        const index = result.findIndex((item) => item.py === py);
        console.log(index);
        if (index > -1) {
          // 当前 city 已经存在 result 中
          result[index].list.push(city);
        } else {
          // 不存在
          result.push({
            py: py,
            list: [city],
          });
        }
      });

      return result.sort((a, b) => a.py.charCodeAt() - b.py.charCodeAt());
    },

    displayIndexs() {
      return this.displayCities.map((item) => item.py);
    },

    // 搜索结果
    searchResult() {
      // 依赖是： cities   searchValue
      // 全匹配
      // return this.cities.filter((item) => item.name === this.searchValue);

      // 半匹配
      return this.cities.filter(
        (item) => item.name.indexOf(this.searchValue) > -1
      );
    },
  },

  created() {},

  mounted() {
    axios.get("http://119.91.129.10:3000/cities").then((res) => {
      const data = res.data;
      if (data.code === 0) {
        // 接口请求成功
        this.cities = data.data;
      } else {
        alert(data.msg);
      }
    });
  },

  methods: {
    onClick(py) {
      // ref 绑定在 v-for 的元素上时，得到的时一个数组格式
      console.log("===", py, this.$refs[py][0]);

      const element = this.$refs[py][0];

      // 计算当前元素 offsetTop
      const offsetTop = element.offsetTop;

      // 让左侧滚动
      this.$refs.content.scrollTo(0, offsetTop);
    },
  },
};
</script>

<style scoped lang="scss">
// 引入样式
@import "./index.scss";
</style>
